// <!-- 轮播图 -->
 
        const arr=[
            {id:1,width:500,height:333,name:"https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/6/30/27be277cf157b114d685b593cfe62c6d.jpg"},
            {id:2,width:500,height:333,name:"https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/1/d532e57ccc87dfb9b5c78821ff5bd24a.jpg"},
            {id:3,width:500,height:333,name:"https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/6/30/bebbb6afd03f87e6b29c9807b1331883.jpg"},
            {id:4,width:500,height:333,name:"https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/5/31/d0cee7474ee70d62e1db5ff35edc423c.jpg"},
            {id:5,width:500,height:333,name:"https://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/6/30/c04689d959e88201289df442b36b5ea3.jpg"},

        ];
        // 生成动态页面
        let oBanner=document.querySelector(".bannerContent");
        let ul_ele=oBanner.querySelector("ul");
        let ol_ele=oBanner.querySelector("ol");
        let ullis;
        let ollis;
        // let liWidth;
        let length=arr.length;
        let index=1;
        let liWidth;
        let t=0;
        let bool=true;
        setPage();
        autoLoop();
        mouseEvent();
        // f();
        mouseClick();
        function setPage(){
            let ulStr="";
            let olStr="";
            arr.forEach(function(item,key){
                ulStr+=`<li><img src="${item.name}" alt="" width="100%" height="100%"></li>`;
                olStr+=key===0?`<li class="active" name="focus" num="${key}"></li>`:`<li  name="focus" num="${key}"></li>`;
            })
            ul_ele.innerHTML=ulStr;
            ol_ele.innerHTML=olStr;

            ullis=oBanner.querySelectorAll("ul>li");
            ollis=oBanner.querySelectorAll("ol>li");

            const firstClone=ullis[0].cloneNode(true);
            const lastClone=ullis[ullis.length-1].cloneNode(true);

            ul_ele.appendChild(firstClone);
            ul_ele.insertBefore(lastClone,ullis[0]);
            liWidth=ullis[0].offsetWidth;
            ul_ele.style.width=liWidth*(length+2)+"px";
            ul_ele.style.left=-liWidth+"px";
        }

        // 自动轮播
        function autoLoop(){
            t=setInterval(function(){
                index++;
            setFocusStyle();

                move(ul_ele,{left:-liWidth*index},moveEndFun)
            },3000)
        }

        // 运动结束回调函数
        function moveEndFun(){
            if(index===length+2-1){
                index=1;
                ul_ele.style.left=-liWidth*index+"px";
            }else if(index===0){
                index=length+2-1-1;
                ul_ele.style.left=-liWidth*index+"px";
            }
            bool=true;
        }

        // 焦点样式切换函数
        function setFocusStyle(){
            ollis.forEach(function(item,key){
                item.classList.remove("active");
                if(key===index-1){
                item.classList.add("active");
                }
            })
        }




        // 鼠标移入移出

        function mouseEvent(){
           oBanner.addEventListener("mouseenter",function(){
                clearInterval(t);
            })
           oBanner.addEventListener("mouseleave",function(){
                autoLoop();
            })
        }

        // 鼠标点击
        function mouseClick(){
            oBanner.addEventListener("click",function(e){
             
                if(e.target.getAttribute("name")==="left"){
                    if(bool){
                        bool=false;
                    }else{
                        return;
                    }
                    index--;
            setFocusStyle();

                    move(ul_ele,{left:-liWidth*index},moveEndFun)
               
                }
                if(e.target.getAttribute("name")==="right"){
                    if(bool){
                        bool=false;
                    }else{
                        return;
                    }
                    index++;
            setFocusStyle();

                    move(ul_ele,{left:-liWidth*index},moveEndFun)
                }
                if(e.target.getAttribute("name")==="focus"){
                    if(bool){
                        bool=false;
                    }else{
                        return;
                    }
                    index=e.target.getAttribute("num")-0+1;
            setFocusStyle();

                    move(ul_ele,{left:-liWidth*index},moveEndFun)
                }
            })
        }


        // function f(){
        //     oBanner.addEventListener("mouseover",function(e){
        //         if(e.target.getAttribute("name")==="focus"){
              

        //             if(bool){
        //                 bool=false;
        //             }else{
        //                 return;
        //             }
        //             index=e.target.getAttribute("num")-0+1;
        //     setFocusStyle();
                    
        //             move(ul_ele,{left:-liWidth*index},moveEndFun)
        //         }
        //     })
        // }
           
        
        
 
    // <!-- 动态生成页面 -->
  
        $(function(){
                $.ajax({
                    url:"../json/data1.json"
                })
           

            .done(function(res){
                render(res.data1);
                console.log(res.data1)
            })

            function render(data1){
                
                $('[name="ul"]').html(
                   data1.map((item)=>
                    
                    `
                    <li class="li1">
                        <p class="title1">
                            <a href="">${item.title}</a>
                        </p>
                        <p class="title2">
                            ${item.subtitle}
                        </p>
                        <p class="curImg">
                            <a href="">
                                <img src="${item.imageUrl}" alt="">
                            </a>
                        </p>
                    </li>
                    `
                    
                       
                    )
               
                ) 
            }
        })
 
    // <!-- 点击事件 -->

        // 点击登录跳转页面同时携带参数
        $('[name="login"]').click(function(){
            window.location.href=`./login.html?url=${window.location.href}`;
        })
        // 点击注册跳转页面同时携带参数
        $('.logTxt').click(function(){
            window.location.href=`./reg.html?url=${window.location.href}`;
        })
        // 点击商品分类按钮跳转到对应的页面
        $('[name="1"]').click(function(){
                 window.location.href=`./list.html?one_id=${$(this).html()}`;
        })
 